{# examples.twig #}
{% extends "layout.twig" %}

{% block subHeader %}
<h2 class="sub-header-tit">EXAMPLES</h2>
<div class="sub-header-content">
    <p class="sub-header-txt">예제에 소개된 클래스를 이용하여 각 기능을 손쉽게 이용할 수 있습니다.</p>
</div>
<img src="assets/img/img_examples.png" class="sub-spot-img">
{% endblock %}

{% block page %}
<div class="container sub-contents-container">
    <div class="sub-section sub-example">
        <div class="row">
            <div class="col-md-3 col-sm-4">
                <h3 class="sub-page-header">기본 아이콘</h3>
                <hr class="half-rule">
                <div class="sub-page-preview">
                    <span class="preview-box box-left">
                        <i class="xi-xpressengine"></i>
                    </span>
                    <span class="preview-box box-right">
                        <span class="">xi-xpressengine</span>
                    </span>
                </div>
            </div>
            <div class="col-md-9 col-sm-8">
                <div class="sub-page-txt-wrap">
                    <p class="sub-page-txt">i 태그내에 xe 아이콘 명을 클래스로 기재합니다.</p>
                    <div class="sub-btn-wrap">
                    </div>
                </div>
                <div class="code-box">
                    <code><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-xpressengine"</span><span class="code-tag">&gt;&lt;/i&gt;</span>&nbsp; xpressengine &lt;/i></code>
                </div>
            </div>
        </div>
    </div>

    <div class="sub-section sub-example">
        <div class="row">
            <div class="col-md-3 col-sm-4">
                <h3 class="sub-page-header">크기 조절 아이콘</h3>
                <hr class="half-rule">
                <div class="sub-page-preview">
                    <ul class="sub-icon-size">
                        <li>
                            <span class="preview-box box-right">
                                <i class="xi-face xi-x"></i>
                            </span>
                            <span class="preview-box box-left2">
                                xi-x
                            </span>
                        </li>
                        <li>
                            <span class="preview-box box-right">
                                <i class="xi-face xi-2x"></i>
                            </span>
                            <span class="preview-box box-left2">
                                xi-2x
                            </span>
                        </li>
                        <li>
                            <span class="preview-box box-right">
                                <i class="xi-face xi-3x"></i>
                            </span>
                            <span class="preview-box box-left2">
                                xi-3x
                            </span>
                        </li>
                        <li>
                            <span class="preview-box box-right">
                                <i class="xi-face xi-4x"></i>
                            </span>
                            <span class="preview-box box-left2">
                                xi-4x
                            </span>
                        </li>
                        <li>
                            <span class="preview-box box-right">
                                <i class="xi-face xi-5x"></i>
                            </span>
                            <span class="preview-box box-left2">
                                xi-5x
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9 col-sm-8">
                <div class="sub-page-txt-wrap">
                    <p class="sub-page-txt">클래스에 따라 아이콘의 크기를 조절할 수 있습니다.</p>
                    <div class="sub-btn-wrap">
                    </div>
                </div>
                <div class="code-box">
                    <code><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-face xi-x"</span><span class="code-tag">&gt;&lt;/i&gt;</span> xi-x<br><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-face xi-2x"</span><span class="code-tag">&gt;&lt;/i&gt;</span> xi-2x<br><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-face xi-3x"</span><span class="code-tag">&gt;&lt;/i&gt;</span> xi-3x<br><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-face xi-4x"</span><span class="code-tag">&gt;&lt;/i&gt;</span> xi-4x<br><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-face xi-5x"</span><span class="code-tag">&gt;&lt;/i&gt;</span> xi-5x</code>
                </div>
            </div>
        </div>
    </div>

    <div class="sub-section sub-example">
        <div class="row">
            <div class="col-md-3 col-sm-4">
                <h3 class="sub-page-header">넓이 고정 아이콘</h3>
                <hr class="half-rule">
                <div class="sub-page-preview">
                    <ul class="lst_group">
                        <li><i class="xi-image xi-fw"  style="vertical-align:middle"></i>&nbsp; Image  </li>
                        <li><i class="xi-movie xi-fw"></i>&nbsp; Video</li>
                        <li><i class="xi-headset xi-fw"></i>&nbsp; Sound</li>
                        <li><i class="xi-pen xi-fw"></i>&nbsp; Text</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9 col-sm-8">
                <div class="sub-page-txt-wrap">
                    <p class="sub-page-txt">&ldquo;xi-fw&rdquo; 클래스를 통해 서로 다른 아이콘들의 넓이값을 고정합니다.</p>
                    <div class="sub-btn-wrap">
                    </div>
                </div>
                <div class="code-box">
                    <code><span class="code-tag">&lt;ul</span> <span class="code-class">class=</span><span class="code-class-name">"lst_group"</span><span class="code-tag">&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-image xi-fw"</span><span class="code-tag">&gt;&lt;/i&gt;&nbsp;Image&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-movie xi-fw"</span><span class="code-tag">&gt;&lt;/i&gt;&nbsp;Video&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-headset xi-fw"</span><span class="code-tag">&gt;&lt;/i&gt;&nbsp;Sound&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-pen xi-fw"</span><span class="code-tag">&gt;&lt;/i&gt;&nbsp;Text&lt;/li&gt;</span><br><span class="code-tag">&lt;/ul&gt;</span></code>
                </div>
            </div>
        </div>
    </div>

    <div class="sub-section sub-example">
        <div class="row">
            <div class="col-md-3 col-sm-4">
                <h3 class="sub-page-header">리스트 아이콘</h3>
                <hr class="half-rule">
                <div class="sub-page-preview2">
                    <ul class="xi-ul">
                        <li><i class="xi-list xi-li"></i> List Icons</li>
                        <li><i class="xi-info-o xi-li"></i> can be used</li>
                        <li><i class="xi-check-circle-o xi-li"></i> as bullets</li>
                        <li><i class="xi-emoticon-happy-o xi-li"></i> in lists</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9 col-sm-8">
                <div class="sub-page-txt-wrap">
                    <p class="sub-page-txt">클래스 &ldquo;xi-ul&rdquo;, &ldquo;xi-li&rdquo;를 사용하여 기본 list-type을 대체하여 사용할 수 있습니다.</p>
                    <div class="sub-btn-wrap">
                    </div>
                </div>
                <div class="code-box">
                    <code><span class="code-tag">&lt;ul</span> <span class="code-class">class=</span><span class="code-class-name">"xi-ul"</span><span class="code-tag">&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-list xi-li"</span><span class="code-tag">&gt;&lt;/i&gt;List Icons&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-info-o xi-li"</span><span class="code-tag">&gt;&lt;/i&gt;can be used&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-check-circle-o xi-li"</span><span class="code-tag">&gt;&lt;/i&gt;as bullets&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-emoticon-happy-o xi-li"</span><span class="code-tag">&gt;&lt;/i&gt;in lists&lt;/li&gt;</span><br><span class="code-tag">&lt;/ul&gt;</span></code>
                </div>
            </div>
        </div>
    </div>

    <div class="sub-section sub-example">
        <div class="row">
            <div class="col-md-3 col-sm-4">
                <h3 class="sub-page-header">아이콘 테두리 및 들여쓰기</h3>
                <hr class="half-rule">
                <div class="sub-page-preview">
                    <p class="sub-page-preview-txts">
                        <i class="xi xi-message xi-3x pull-left xi-border"></i>
                        XEIcon is a full shite of 680 pictographic icons for easy scalable vector graphics on websites, created by Junha,Lee, and maintained by XpressEngine.
                    </p>

                </div>
            </div>
            <div class="col-md-9 col-sm-8">
                <div class="sub-page-txt-wrap">
                    <p class="sub-page-txt">&ldquo;xi-border&rdquo;와 &ldquo;pull-left&rdquo; 또는 &ldquo;pull-right&rdquo;를 사용하여 문장에 앞에 쓰일 수 있는 아이콘의 보더 효과와 들여쓰기를 이용할 수 있습니다.</p>
                    <div class="sub-btn-wrap">
                    </div>
                </div>
                <div class="code-box">
                    <code><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi xi-message xi-3x pull-left xi-border"</span><span class="code-tag">&gt;&lt;/i&gt;</span><br></code>
                    <span class="code-txt">XEIcon is a full shite of 680 pictographic icons for easy scalable vector graphics on websites, created by Junha,Lee, and maintained by XpressEngine.</span>
                </div>
            </div>
        </div>
    </div>

    <div class="sub-section sub-example">
        <div class="row">
            <div class="col-md-3 col-sm-4">
                <h3 class="sub-page-header">자동 회전 아이콘</h3>
                <hr class="half-rule">
                <div class="sub-page-preview">
                    <ul class="lst_row">
                        <li><i class="xi-spinner-1 xi-spin"></i></li>
                        <li><i class="xi-spinner-2 xi-spin"></i></li>
                        <li><i class="xi-spinner-3 xi-spin"></i></li>
                        <li><i class="xi-spinner-4 xi-spin"></i></li>
                        <li><i class="xi-spinner-5 xi-spin"></i></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9 col-sm-8">
                <div class="sub-page-txt-wrap">
                    <p class="sub-page-txt">클래스 &ldquo;xi-spin&rdquo;을 사용하여 xe에서 제공하는 아이콘을 자동회전 시킬 수 있습니다.</p>
                    <div class="sub-btn-wrap">
                    </div>
                </div>
                <div class="code-box">
                    <code><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-spinner-1 xi-spin"</span><span class="code-tag">&gt;&lt;/i&gt;</span><br><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-spinner-2 xi-spin"</span><span class="code-tag">&gt;&lt;/i&gt;</span><br><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-spinner-3 xi-spin"</span><span class="code-tag">&gt;&lt;/i&gt;</span><br><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-spinner-4 xi-spin"</span><span class="code-tag">&gt;&lt;/i&gt;</span><br><span class="code-tag">&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-spinner-5 xi-spin"</span>&gt;&lt;/i&gt;</code>
                </div>
            </div>
        </div>
    </div>

    <div class="sub-section sub-example">
        <div class="row">
            <div class="col-md-3 col-sm-4">
                <h3 class="sub-page-header">고정 회전 아이콘</h3>
                <hr class="half-rule">
                <div class="sub-page-preview">
                    <ul class="lst_rotate">
                        <li><i class="xi-note-o"></i>normal</li>
                        <li><i class="xi-note-o xi-rotate-90"></i> xi-rotate-90</li>
                        <li><i class="xi-note-o xi-rotate-180"></i> xi-rotate-180</li>
                        <li><i class="xi-note-o xi-rotate-270"></i> xi-rotate-270</li>
                        <li><i class="xi-note-o xi-flip-horizontal"></i> xi-flip-horizontal</li>
                        <li><i class="xi-note-o xi-flip-vertical"></i> xi-flip-vertical</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9 col-sm-8">
                <div class="sub-page-txt-wrap">
                    <p class="sub-page-txt">원하는 각도 및 반전 효과를 각 클래스를 추가하여 이용할 수 있습니다.</p>
                    <div class="sub-btn-wrap">
                    </div>
                </div>
                <div class="code-box">
                    <code><span class="code-tag">&lt;ul</span> <span class="code-class">class=</span><span class="code-class-name">"lst_rotate"</span><span class="code-tag">&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-note"</span><span class="code-tag">&gt;&lt;/i&gt;normal&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-note xi-rotate-90"</span><span class="code-tag">&gt;&lt;/i&gt;xi-rotate-90&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-note xi-rotate-180"</span><span class="code-tag">&gt;&lt;/i&gt;xi-rotate-180&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-note xi-rotate-270"</span><span class="code-tag">&gt;&lt;/i&gt;xi-rotate-270&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-note xi-flip-horizontal"</span><span class="code-tag">&gt;&lt;/i&gt;xi-flip-horizontal&lt;/li&gt;</span><br>  <span class="code-tag">&lt;li&gt;&lt;i</span> <span class="code-class">class=</span><span class="code-class-name">"xi-note xi-flip-vertical"</span><span class="code-tag">&gt;&lt;/i&gt;xi-flip-vertical&lt;/li&gt;</span><br><span class="code-tag">&lt;/ul&gt;</span></code>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
